<template>
  <div class="register-container">
    <div class="register-card">
      <div class="register-header">
        <h2>注册汉中旅游平台</h2>
        <p>探索两汉三国文化，开启你的汉中之旅</p>
      </div>
      <el-form :model="registerForm" :rules="registerRules" ref="registerForm" class="register-form" enctype="multipart/form-data">
        <el-form-item prop="account">
          <el-input v-model="registerForm.account" placeholder="请设置用户名" prefix-icon="el-icon-user"></el-input>
        </el-form-item>
        
        <el-form-item prop="name">
          <el-input v-model="registerForm.name" placeholder="请输入姓名" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        
        <el-form-item prop="gender">
          <el-radio-group v-model="registerForm.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
            <el-radio label="保密">保密</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item prop="password">
          <el-input v-model="registerForm.password" type="password" placeholder="请设置密码" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        
        <el-form-item prop="confirmPassword">
          <el-input v-model="registerForm.confirmPassword" type="password" placeholder="请确认密码" prefix-icon="el-icon-lock"></el-input>
        </el-form-item>
        
        <el-form-item prop="email">
          <el-input v-model="registerForm.email" placeholder="请输入邮箱" prefix-icon="el-icon-envelope"></el-input>
        </el-form-item>
        
        <el-form-item prop="image">
          <div class="avatar-uploader">
            <el-upload 
              class="avatar-uploader__trigger" 
              :action="serverAddress + 'uploadImg'" 
              :show-file-list="false" 
              :on-success="handleAvatarSuccess" 
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="registerForm.image" :src="registerForm.image" class="avatar-uploader__img">
              <i v-else class="el-icon-plus avatar-uploader__icon"></i>
            </el-upload>
            <p v-if="registerForm.image" class="avatar-uploader__text">已选择头像</p>
          </div>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="submitRegister" class="register-button" round>注册</el-button>
        </el-form-item>
        <div class="login-link">
          <span>已有账号? </span><el-link type="primary" @click="goToLogin">立即登录</el-link>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    return {
      serverAddress: "http://101.34.72.6:8088/userApi/loginCtl/",
      registerForm: {
        account: '3271781853',
        name: '崔渭阳',
        gender: '男',
        password: '123456',
        confirmPassword: '123456',
        email: '3247745861@qq.com',
        image: ''
      },
      registerRules: {
        account: [
          { required: true, message: '请设置用户名', trigger: 'blur' },
          { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '姓名长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请设置密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: this.confirmPasswordValidator, trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
        ],
        image: [
          { required: true, message: '请上传头像', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    confirmPasswordValidator(rule, value, callback) {
      if (value !== this.registerForm.password) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    },
    
    handleAvatarSuccess(res, file) {
      if (res.code === 500) {
        this.$message({
          message: res.message || '头像上传失败',
          type: "error"
        });
      } else if (res.code === 200) {
        this.registerForm.image = res.data;
        this.$message({
          message: '头像上传成功',
          type: "success"
        });
      }
    },
    
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isGIF = file.type === 'image/gif';
      const isLt2M = file.size / 1024 / 1024 < 2;
      
      if (!(isJPG || isPNG || isGIF)) {
        this.$message.error('只能上传JPG、PNG或GIF格式的图片');
        return false;
      }
      
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB');
        return false;
      }
      
      const reader = new FileReader();
      reader.onload = (e) => {
        this.registerForm.image = e.target.result;
      };
      reader.readAsDataURL(file);
      
      return true;
    },
    
    submitRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          if (this.registerForm.image && this.registerForm.image.startsWith('data:image')) {
            this.$message({
              message: '请等待头像上传完成',
              type: 'warning'
            });
            return;
          }
          
          this.$http.post("userApi/loginCtl/register", this.registerForm).then((resp) => {
            if (resp.data.code === 200) {
              this.$message({
                message: '注册成功',
                type: 'success'
              });
              this.$router.push("/login");
            } else {
              this.$message({
                message: resp.data.desc || '注册失败，请重试',
                type: 'error'
              });
            }
          }).catch(() => {
            this.$message({
              message: '注册请求失败，请重试',
              type: 'error'
            });
          });
        } else {
          console.log('验证失败');
          return false;
        }
      });
    },
    
    goToLogin() {
      this.$router.push("/login");
    }
  }
}
</script>

<style scoped>
/* 样式保持不变，可根据需要调整布局 */
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
}

.register-card {
  width: 400px;
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}


.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
}

.register-card {
  width: 400px;
  background-color: #fff;
  padding: 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.register-header {
  text-align: center;
  margin-bottom: 24px;
}

.register-header h2 {
  margin: 0;
  font-size: 24px;
  color: #333;
}

.register-header p {
  margin: 8px 0 0;
  font-size: 14px;
  color: #666;
}

.register-form {
  margin-top: 24px;
}

.register-button {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  margin-top: 16px;
}

.login-link {
  margin-top: 15px;
  text-align: center;
  font-size: 14px;
}

.login-link span {
  color: #666;
}

.login-link .el-link {
  color: #409eff;
}

/* 头像上传样式 */
.avatar-uploader {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.avatar-uploader__trigger {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px dashed #dcdfe6;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.avatar-uploader__trigger:hover {
  border-color: #409eff;
}

.avatar-uploader__icon {
  font-size: 28px;
  color: #8c939d;
}

.avatar-uploader__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-uploader__text {
  margin-top: 8px;
  font-size: 14px;
  color: #666;
}
</style>